<template>
  <div>
    <van-nav-bar
  right-text="注册"
  left-arrow
  nav-bar-icon-color="red"
/>
<!-- 验证码登录 -->
<van-form @submit="onSubmit" class="form" v-if="isshow">
  <div class="head">
  <div class="left">手机验证码登录</div>
  <div class="right" @click="changeshow">密码登录<van-icon name="arrow" /></div>
</div>
  <van-field
  class="username"
    v-model="username"
    name="mobile"
    placeholder="用户名"
    :rules="[{ required: true, message: '请输入正确手机号码' },{pattern:/^\w{11,}$/,message:'请输入正确手机号码'}]"
  />
  <van-field
  class="password"
    v-model="code"
    :type="mytype"
    name="code"
    placeholder="请输入短信验证码"
    :rules="[{ required: true, message: '请输入正确短信验证码' },{pattern:/^\w{6,}$/,message:'请输入正确短信验证码'}]"
  >
  <template #button>
          <span class="btn-send" @click="sendmsg">{{num}}{{ messagebtn }}</span>
        </template>
    </van-field>
  <div class="checkbox"><van-checkbox v-model="checked" class="selectbox" checked-color="#16C2A3" icon-size="14px" @click="checkeds"></van-checkbox>
    <span>我已同意</span>&nbsp;<router-link to="/" class="user">用户协议</router-link>&nbsp;
    <span>及</span>&nbsp;<router-link to="/" class="hide">隐私协议</router-link>
  </div>
  <div style="margin: 16px;">
    <van-button round block color="#16C2A3" native-type="submit"  :class="{'buttonbox':ischeck}">登录</van-button>
  </div>
</van-form>
<!-- 密码登录-->
<van-form @submit="onSubmit" class="form" v-else>
  <div class="head">
  <div class="left">密码登录</div>
  <div class="right" @click="changeshow">手机验证码登录<van-icon name="arrow" /></div>
</div>
  <van-field
  class="username"
    v-model="username"
    name="mobile"
    placeholder="用户名"
    :rules="[{ required: true, message: '请输入正确手机号码' },{pattern:/^\w{11,}$/,message:'请输入正确手机号码'}]"
  />
  <van-field
  class="password"
    v-model="password"
    :type="mytype"
    name="password"
    placeholder="密码"
    :right-icon="eye"
    @click-right-icon="myeye"
    :rules="[{ required: true, message: '请输入正确密码' },{pattern:/^\w{8,}$/,message:'请输入正确密码'}]"
  />
  <div class="checkbox"><van-checkbox v-model="checked" class="selectbox" checked-color="#16C2A3" icon-size="14px" @click="checkeds"></van-checkbox>
    <span>我已同意</span>&nbsp;<router-link to="/" class="user">用户协议</router-link>&nbsp;
    <span>及</span>&nbsp;<router-link to="/" class="hide">隐私协议</router-link>
  </div>
  <div style="margin: 16px;">
    <van-button round block color="#16C2A3" native-type="submit"  :class="{'buttonbox':ischeck}">登录</van-button>
  </div>
</van-form>

<div class="misspword">忘记密码?</div>
<div class="bottom">————— &nbsp;第三方登录 &nbsp;—————</div>
<div class="qqbox"><van-icon  name="qq" size="30" color="#fff" class="qq"/></div>
  </div>

</template>
<script>
import { mobileApi } from '@/api/user'
export default {
  name: 'LoginPage',
  data () {
    return {
      username: '',
      password: '',
      checked: false,
      ischeck: true,
      eye: 'closed-eye',
      mytype: 'password',
      isshow: false,
      messagebtn: '发送验证码',
      num: '',
      type: 'login',
      captcha: 0,
      code: ''
    }
  },
  methods: {
    async onSubmit (value) {
      if (this.isshow === false) {
        if (this.checked === true) {
          try {
            await this.$store.dispatch('user/getToken', value)
            this.$toast('登录成功')
            this.$router.push('/indexpage')
          } catch (err) {
            console.log(err)
            this.$toast('账户或密码错误，请重新输入')
          }
        } else {
          this.$toast('请勾选我已同意')
        }
      } else {
        if (this.checked === false) return this.$toast('请勾选我已同意')
        try {
          await this.$store.dispatch('user/getToken2', value)
          this.$toast('登录成功')
          this.$router.push('/indexpage')
        } catch (err) {
          console.log(err)
          this.$toast('账户或验证码错误，请重新输入')
        }
      }
    },
    checkeds () {
      this.ischeck = !this.ischeck
    },
    myeye () {
      if (this.eye === 'closed-eye') {
        this.eye = 'eye-o'
        this.mytype = 'text'
      } else {
        this.eye = 'closed-eye'
        this.mytype = 'password'
      }
    },
    changeshow () {
      this.username = ''
      this.password = ''
      this.code = ''
      this.isshow = !this.isshow
    },
    async sendmsg () {
      if (this.username === '') return this.$toast('请输入用户名')
      if (this.num > 0) return
      const res = await mobileApi({ mobile: this.username, type: this.type })
      console.log(res)
      if (res.code === 400) return this.$toast('手机号码未注册，请先去注册账号')
      this.messagebtn = 's后重新发送'
      this.num = 60
      this.captcha = res.data.code
      this.$toast(`验证码为${this.captcha}`)
      const timeId = setInterval(() => {
        this.num--
        if (this.num === 0) {
          clearInterval(timeId)
          this.messagebtn = '发送验证码'
          this.num = ''
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.qqbox{
   width: 40px;
  height: 40px;
  border-radius: 50%;
   margin-left: 44%;
  margin-top: 3%;
  background-color: #00AAFF;
  text-align: center;
  padding-top: 6px;
}
.checkbox{
  display: flex;
  margin-top: 10px;

  .selectbox{
    font-size: 14px;
    margin-left: 14px;
    margin-right: 5px;
  }
  span{
    font-size: 14px;
  }
  .user,.hide{
    font-size: 14px;
    color: #7BDCCA;
  }
}
.van-nav-bar__text{
  font-size: 16px;
  font-weight: 700;
  color: #46CFB6 !important;
}
.head{
  display: flex;
  justify-content: space-between;
  padding: 50px 15px 50px 20px;
  .left{
    font-weight: 700;
    font-size: 20px;
  }
  .right{
    padding-top: 8px;
    font-size: 14px;
    img{
      width: 12px;
      height: 12px;
      background-color: #fff;
    }
  }
}
.buttonbox{
  background-color: #eee !important;
  color:#999;
  border: none !important;
}
.misspword{
  margin-left: 42%;
  color: #ACACAC;
  font-size: 14px;
}

.bottom{
  color: #CDCDCE;
  font-size: 12px;
  margin-left: 24%;
  margin-top: 45%;
}
.btn-send{
  color: #80DDCD;
}

</style>
